<template>
    <div class="main_content">
        <div class="content">
            <div class="search">
                <div class="list">
                    <span>关键字搜索:</span>
                    <Input v-model="sn" placeholder="请输入硬件SN" style="width:200px" maxlength="15" clearable />
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <el-button type="primary" @click="searchAll" plain size="small">搜索</el-button>
                    <el-button type="info" @click="clear" style="margin-left:20px;" size="small" plain>重置</el-button>
                </div>
            </div>
            <div class="table">
                <el-table :data="list" :height="tableHeight">
                    <el-table-column fixed prop="sn" label="硬件SN" ></el-table-column>
                    <el-table-column prop="code" label="硬件编码" ></el-table-column>
                    <el-table-column prop="time" label="上次通讯时间" ></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="getDetails(scope.$index, list)" type="text" size="small" >详情</el-button>
                            <el-button @click.native.prevent="getConfig(scope.$index, list)" type="text" size="small" >配置</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <Page v-if="totalCount" :current="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
            </div>
        </div>
    </div>
</template>

<script>
import { getHDCAlgDeviveList} from "@/api/hardware.js";
export default {
    data() {
        return {
            list: [],
            pageNum: 1,
            pageSize: 10,
            totalCount: "",
            current: 1,
            sn:"",
            tableHeight:window.innerHeight - 280 ,
        };
    },
    methods: {
        getAllList(){
            let params ={
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                keyword:this.sn,
            }
            getHDCAlgDeviveList(params).then(res=>{
                if(res.code == 200) {
                    this.list = res.data.list;
                    this.totalCount =res.data.total;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        pageChange(index){
            this.pageNum =index;
            this.getAllList();
        },
        searchAll(){
            this.getAllList();
        },
        clear(){
            this.sn = "";
            this.getAllList();
        },
        getDetails(index,rows){
            localStorage.setItem("sn",rows[index].sn);
            localStorage.setItem("type",this.type);
            localStorage.setItem("type_sn",this.sn);
            this.$router.push({path: './alg_data',})
        },
        getConfig(index,rows){
            localStorage.setItem("sn",rows[index].sn);
            localStorage.setItem("type",this.type);
            localStorage.setItem("type_sn",this.sn);
            this.$router.push({path: './alg_config',})
        },
        cancel(type){
            if(type == 0) {
                this.Modal = false
            }
        }
    },
    mounted(){
        this.getAllList();
    }
};
</script>

<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/common.less";
</style>


